<!doctype html>
<head>
    <meta charset="utf-8"/>
    <title>Quarkus CEKit Cacher</title>
    <!-- files installed with npm install patternfly --save -->
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/patternfly.min.css">
    <link rel="stylesheet" type="text/css" href="css/patternfly-additions.min.css">
    <!-- JS -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.js"></script>
    <script src="js/dataTables.select.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/bootstrap-combobox.js"></script>
    <script src="js/patternfly.min.js"></script>
    <script src="js/patternfly.js"></script>
    <script src="js/patternfly.dataTables.pfEmpty.min.js"></script>
    <script src="js/patternfly.dataTables.pfFilter.min.js"></script>
    <script src="js/patternfly.dataTables.pfPagination.min.js"></script>
    <script src="js/patternfly.dataTables.pfResize.min.js"></script>
    <script src="js/patternfly.dataTables.pfSelect.min.js"></script>

    <script>
        // force pr tooltip
        $(function () {
            $("[data-toggle='tooltip']").tooltip();
        });

        // retry nightly build
        function retryNightlyBuild() {
            var element = document.getElementById("retryResult")
            var force = false
            if ($('#force').is(':checked') || $('#force-1').is(':checked')){
                force = true
            }
            fetch('/watcher/retry/'+force).then(response => response.text())
                .then(result => {
                    element.innerHTML = result
                });
        }

        // delete artifact
        function Delete(checksum) {
            var values = []
            if (!checksum) {
                var data = $('#table1').DataTable().rows('.selected').data();
                for (var i = 0; i < data.length; i++) {
                    values.push(data[i].checksum)
                }

            } else {
                values.push(checksum)
            }

            $.ajax({
                contentType: "application/json; charset=utf-8",
                type: "DELETE",
                url: '/resource',
                data: JSON.stringify(values),
                async: true,
                success: function (data) {
                    alert('Response: ' + data);
                    location.reload();
                }
            });
        }
    </script>

    <script>
        // fetch the resources and populate the datatable
        fetch('/resource')
            .then(response => response.json()).then(data => populateDataTable(data))
    </script>

    <script>
        function populateDataTable(dataSet) {
            $(document).ready(function () {
                // DataTable Config
                $("#table1").DataTable({
                    columns: [
                        {
                            data: null,
                            className: "table-view-pf-select",
                            render: function (data, type, full, meta) {
                                // Select row checkbox renderer
                                var id = "select" + meta.row;
                                return '<label class="sr-only" for="' + id + '">Select row ' + meta.row +
                                    '</label><input type="checkbox" id="' + id + '" name="' + id + '">';
                            },
                            sortable: false
                        },
                        {data: "fileName"},
                        {data: "checksum"},
                        {data: "timestamp"},
                        {
                            data: null,
                            className: "table-view-pf-actions",
                            render: function (data, type, full, meta) {
                                // Inline action button renderer
                                return '<div class="dropdown dropdown-kebab-pf">' +
                                    '<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
                                    '<span class="fa fa-ellipsis-v"></span></button>' +
                                    '<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">' +
                                    '<li><a href="/resource/' + data.checksum + '" >Download</a></li>' +
                                    '<li><a id="deleteArtifact" href="#" onClick="javascript:Delete(\'' + data.checksum + '\')" >Delete</a></li>';
                            }
                        }

                    ],
                    data: dataSet,
                    dom: "t",
                    language: {
                        zeroRecords: "No records found"
                    },
                    order: [[1, 'asc']],
                    pfConfig: {
                        emptyStateSelector: "#emptyState1",
                        filterCaseInsensitive: true,
                        filterCols: [
                            null,
                            {
                                default: true,
                                optionSelector: "#filter1",
                                placeholder: "Filter By File Name..."
                            }, {
                                optionSelector: "#filter2",
                                placeholder: "Filter By Checksum..."
                            }
                        ],
                        paginationSelector: "#pagination1",
                        toolbarSelector: "#toolbar1",
                        selectAllSelector: 'th:first-child input[type="checkbox"]',
                        colvisMenuSelector: '.table-view-pf-colvis-menu'
                    },
                    select: {
                        selector: 'td:first-child input[type="checkbox"]',
                        style: 'multi'
                    },
                });

                /**
                 * Utility to show empty Table View
                 *
                 * @param {object} config - Config properties associated with a Table View
                 * @param {object} config.data - Data set for DataTable
                 * @param {string} config.tableSelector - Selector for the HTML table
                 */
                var emptyTableViewUtil = function (config) {
                    var self = this;

                    this.dt = $(config.tableSelector).DataTable(); // DataTable

                    // Initialize restore rows
                    if (this.dt.data().length === 0) {
                        $(this.restoreRows).prop("disabled", false);
                    }
                };

                // Initialize empty Table View util
                new emptyTableViewUtil({
                    data: dataSet,
                    tableSelector: "#table1"
                });

                /**
                 * Utility to find items in Table View
                 */
                var findTableViewUtil = function (config) {
                    // Upon clicking the find button, show the find dropdown content
                    $(".btn-find").click(function () {
                        $(this).parent().find(".find-pf-dropdown-container").toggle();
                    });

                    // Upon clicking the find close button, hide the find dropdown content
                    $(".btn-find-close").click(function () {
                        $(".find-pf-dropdown-container").hide();
                    });
                };

                // Initialize find util
                new findTableViewUtil();

            });
        }
    </script>

    <script>
        // Initialize Datatables
        $(document).ready(function () {
            $('.datatable').dataTable();
        });


    </script>


</head>
<body>

<nav class="navbar navbar-default navbar-pf" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand">Quarkus CEKit Cacher - Serve as a artifact cache for CEKit builds</div>

    </div>
    <div class="collapse navbar-collapse navbar-collapse-1">
        <ul class="nav navbar-nav navbar-primary">
            <li>
                <a href="index.html">Add artifacts</a>
            </li>
            <li class="active">
                <a href="list-artifacts.html">List Artifacts</a>
            </li>
        </ul>
    </div>
</nav>

<!-- Toolbar -->
<div class="row toolbar-pf table-view-pf-toolbar" id="toolbar1">
    <div class="col-sm-12">
        <form class="toolbar-pf-actions">
            <div class="form-group toolbar-pf-filter">
                <label class="sr-only" for="filter">File Name</label>
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" id="filter" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">File Name <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" id="filter1">File Name</a></li>
                            <li><a href="#" id="filter2">Checksum</a></li>
                        </ul>
                    </div>
                    <input type="text" class="form-control" placeholder="Filter By File Name..."
                           autocomplete="off" id="filterInput">
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-default" type="button" onclick="Delete()">Delete Selected</button>
                <button class="btn btn-default" type="button" onclick="retryNightlyBuild()">Retry Nightly Build</button>
                <input type="checkbox" id="force" class="form-check-input" data-toggle="tooltip" data-placement="right"
                       data-original-title="Useful when automated PRs for nightly builds are wrongly merged, it will force the cacher to create the PRs containing the latest artifacts."/>
                <label class="form-check-label" for="force">Force PR?</label>
            </div>
            <div class="form-group"><b id="retryResult"></b></div>

            <div class="toolbar-pf-action-right">
                <div class="form-group toolbar-pf-find">
                    <div class="find-pf-dropdown-container">
                        <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
                        <div class="find-pf-buttons">
                            <span class="find-pf-nums">1 of 3</span>
                            <button class="btn btn-link" type="button">
                                <span class="fa fa-angle-up"></span>
                            </button>
                            <button class="btn btn-link" type="button">
                                <span class="fa fa-angle-down"></span>
                            </button>
                            <button class="btn btn-link btn-find-close" type="button">
                                <span class="pficon pficon-close"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="row toolbar-pf-results">
            <div class="col-sm-9">
                <div class="hidden">
                    <h5>0 Results</h5>
                    <p>Active filters:</p>
                    <ul class="list-inline"></ul>
                    <p><a href="#">Clear All Filters</a></p>
                </div>
            </div>
            <div class="col-sm-3 table-view-pf-select-results">
                <strong>0</strong> of <strong>0</strong> selected
            </div>
        </div>
    </div>
</div>

<!-- Table HTML -->
<table class="table table-striped table-bordered table-hover" id="table1">
    <thead>
    <tr>
        <th><label class="sr-only" for="selectAll">Select all rows</label>
            <input type="checkbox" id="selectAll" name="selectAll"></th>
        <th>File Name</th>
        <th>Checksum</th>
        <th>Timestamp</th>
        <th colspan="2">Actions</th>
    </tr>
    </thead>
</table>

<form class="content-view-pf-pagination table-view-pf-pagination clearfix" id="pagination1">
    <div class="form-group">
        <select class="selectpicker pagination-pf-pagesize">
            <option value="6">6</option>
            <option value="10">10</option>
            <option value="15" selected="selected">15</option>
            <option value="25">25</option>
            <option value="50">50</option>
        </select>
        <span>per page</span>
    </div>
    <div class="form-group">
        <span><span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span></span>
        <ul class="pagination pagination-pf-back">
            <li class="disabled"><a href="#" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>
            <li class="disabled"><a href="#" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>
        </ul>
        <label for="pagination1-page" class="sr-only">Current Page</label>
        <input class="pagination-pf-page" type="text" value="1" id="pagination1-page"/>
        <span>of <span class="pagination-pf-pages">5</span></span>
        <ul class="pagination pagination-pf-forward">
            <li><a href="#" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>
            <li><a href="#" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>
        </ul>
    </div>
</form>

<!-- Blank Slate HTML -->
<div class="blank-slate-pf table-view-pf-empty hidden" id="emptyState1">
    <div class="blank-slate-pf-icon">
        <span class="pficon pficon pficon-add-circle-o"></span>
    </div>
    <h1>
        No Artifacts found
    </h1>
    <p>
        Learn more about this cekit cacher <a
            href="https://github.com/kiegroup/kie-cloud-tools/tree/master/cekit-cache-server/README.md">in the
        documentation</a>.
    </p>
    <div class="blank-slate-pf-main-action">
        <a href="/index.html" title="">
            <button class="btn btn-primary btn-lg">Add artifacts</button>
        </a>

        <button class="btn btn-primary btn-lg"
                id="retryNightlyBuild"
                onclick="retryNightlyBuild()"
                type="submit">Retry Nightly Build
        </button>
        <input type="checkbox" id="force-1" class="form-check-input" data-toggle="tooltip" data-placement="right"
               data-original-title="Useful when automated PRs for nightly builds are wrongly merged, it will force the cacher to create the PRs containing the latest artifacts."/>
        <label class="form-check-label" for="force-1">Force PR?</label>
    </div>
    <b id="retryResult"></b>
</div>
</body>
</html

